<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="4">
                <div class="nav">
                    <div class="title">产品类型列表</div>
                    <div class="tree">
                        <!-- <treeProduct @sendTreeData="sendTreeData"></treeProduct> -->
                       
                            <el-radio v-model="radio" label="鱼类">鱼类</el-radio>
                            <el-radio v-model="radio" label="蟹类">蟹类</el-radio>
                            <el-radio v-model="radio" label="肉类">肉类</el-radio>
                            <el-radio v-model="radio" label="虾类">虾类</el-radio>
                        
                    </div>
                </div>
            </el-col>
            <el-col :span="20">
                <div class="wrapper">
                    <div class="my-title">商品添加</div>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="所属分类" prop="category">
                            <el-input v-model="this.radio"></el-input>
                            
                        </el-form-item>
                        <el-form-item label="商品名称" prop="title">
                            <el-input v-model="ruleForm.title"></el-input>
                        </el-form-item>
                        <el-form-item label="商品价格" prop="price">
                            <el-input v-model="ruleForm.price"></el-input>
                        </el-form-item>
                        <el-form-item label="商品数量" prop="num">
                            <el-input v-model="ruleForm.num"></el-input>
                        </el-form-item>
                        <el-form-item label="商品卖点" prop="sellpoint">
                            <el-input v-model="ruleForm.sellpoint"></el-input>
                        </el-form-item>
                        <el-form-item label="图片地址" prop="image">
                            <!-- <UploadImg></UploadImg> -->

                            <el-input v-model="ruleForm.image"></el-input>
                        </el-form-item>
                        <el-form-item label="商品描述" prop="descs">
                            <el-input v-model="ruleForm.descs"></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="首页轮播推荐" prop="isShow">
                            <el-switch v-model="ruleForm.isShow" active-color="#13ce66"
                                inactive-color="#ff4949">></el-switch>
                        </el-form-item>
                        <el-form-item label="是否推荐商品" prop="isShow">
                            <el-switch v-model="ruleForm.isShow" active-color="#13ce66"
                                inactive-color="#ff4949">></el-switch>
                        </el-form-item>
                        <el-form-item label="是否上架商品" prop="isShow">
                            <el-switch v-model="ruleForm.isShow" active-color="#13ce66"
                                inactive-color="#ff4949">></el-switch>
                        </el-form-item> -->



                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                            <el-button @click="backlist">取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import treeProduct from './TreeProduct.vue'
import UploadImg from './UploadImg.vue'
export default {
    components: {
        treeProduct,
        UploadImg
    },
    data() {
        return {
            ruleForm: {//表单数据
                title: '',//商品名称
                num: '',//
                price: '',
                sellpoint: '',
                image: '',
                descs: '',
                category: '',
                cid: '',
                isShow: true,
            },
            rules: {//表单验证规则
                title: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                num: [
                    { required: true, message: '请输入商品数量', trigger: 'blur' },
                ],
                price: [
                    { required: true, message: '请输入商品价格', trigger: 'blur' },
                ],
                category: [
                    { required: true, message: '请选择商品的类目', trigger: 'blur' },
                ],
            },
            radio: '鱼类'//单选框值
        };
    },
    methods: {
        //获取tree点击的数据
        // sendTreeData(val){
        //     //存储接受的tree的数据 val={id:,cid:,name:''}
        //     this.ruleForm.category = val.name
        // },
        //提交事件----------------------
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        backlist(){
            this.$router.push('/product/list')
        }
    }
}
</script>

<style lang="less" scoped>
.nav {
    height: 600px;
    background: #f5f2f2;

    .title {
        background: rgb(0, 178, 254);
        padding: 20px;
        color: #161616;
    }

    .tree {
        padding: 20px;
        .el-radio{
          margin-top: 20px;
        }
    }
}

.wrapper {
    height: 800px;
    background: #f5f2f2;

    .my-title {
        background: #eee;
        padding: 14px;
        color: #333;
        font-weight: bold;
        margin-bottom: 30px;
    }

    .demo-ruleForm {
        padding: 20px;
    }
}
</style>